<template>
  <el-row :gutter="10">
    <el-col :span="4">
      <el-card class="card">
        <template #header>
          <div class="card-header">
            <label style="font-weight: 600;font-size: 15px">
              <el-icon>
                <SoldOut/>
              </el-icon>
              调拨机构导航栏
            </label>
          </div>
        </template>
        <Tree @id="getAssetCheckByMid"/>
      </el-card>
    </el-col>

    <el-col :span="20">
      <el-card class="card">
        <div class="t_box bottom">
          <div class="s_box">
            <el-input class="s_item" placeholder="请输入资产编号..." v-model="queryForm.map.zcbh" clearable @clear="reset"></el-input>
            <el-input class="s_item" placeholder="请输入资产名称..." v-model="queryForm.map.zcmc" clearable @clear="reset"></el-input>
            <el-select class="s_item" v-model="queryForm.map.type_Id" placeholder="资产类别" style="width: 130px">
              <el-option
                      v-for="(item,index) in assetTypeData"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
              />
            </el-select>
            <el-button type="primary" :icon="Search" @click="initAssetCheckList">查询</el-button>
            <el-button type="info" :icon="Setting" @click="reset">重置</el-button>
            <el-dropdown style="margin-left: 10px">
              <el-button type="success" :icon="SoldOut">文件导出</el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :icon="SoldOut">Excel导出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <el-table
                ref="tableDataRef"
                :data="tableData"
                border stripe
                :cell-style="{textAlign: 'center'}"
                :header-cell-style="{textAlign: 'center'}"
                height="250"
                @row-click="handleRowClick"
        >
          <el-table-column label="使用标识" width="190" fixed>
            <template #default="props">
              <el-tag class="bs" size="default" v-if="props.row.assetDepreciation !== null" type="danger">已折旧</el-tag>
              <el-tag class="bs" size="default" v-else-if="true" type="danger">未折旧</el-tag>
              <el-tag class="bs" size="default" v-if="props.row.assetAllocate !== null" type="success">调拨</el-tag>
              <el-tag class="bs" size="default" v-if="props.row.assetFix !== null" type="warning">维修</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sts" label="资产状态" width="90" fixed>
            <template v-slot="scope">
              <el-tag size="default" v-if="scope.row.sts === 1" type="success" effect="dark">正常</el-tag>
              <el-tag size="default" v-else-if="scope.row.sts === 2" type="warning" effect="dark">损坏</el-tag>
              <el-tag size="default" v-else-if="scope.row.sts === 3" type="danger" effect="dark">报废</el-tag>
              <el-tag size="default" v-else-if="scope.row.sts === 4" effect="dark">调拨</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="rksj" label="入库时间" sortable="custom" width="130" fixed :formatter="formatDate"/>
          <el-table-column prop="zcbh" label="资产编号" width="130" fixed/>
          <el-table-column prop="zcmc" label="资产名称" width="120"/>
          <el-table-column prop="assetType" label="资产类别" width="150" :formatter="formatterAssetType"/>
          <el-table-column prop="zcxh" label="资产型号" width="85"/>
          <el-table-column prop="zcdj" label="资产单价" width="100"/>
          <el-table-column prop="zcje" label="资产金额" width="100"/>
          <el-table-column prop="sccj" label="生产厂家" width="150"/>
          <el-table-column prop="scrq" label="生产日期" sortable="custom" width="145" :formatter="formatDate"/>
          <el-table-column prop="gmrq" label="购买日期" sortable="custom" width="145" :formatter="formatDate"/>
          <el-table-column prop="gmr" label="购买人" width="100">
            <template #default="scope">
              <label v-if="scope.row.gmr==='1'">员工1</label>
              <label v-else-if="scope.row.gmr==='2'">员工2</label>
              <label v-else-if="scope.row.gmr==='3'">员工3</label>
            </template>
          </el-table-column>
          <el-table-column prop="kcsl" label="库存数量" sortable="custom" width="120"/>
          <el-table-column prop="cght" label="采购合同" width="250">
            <template v-slot="scope">
              <a target="_blank" :href="getServerUrl()+'contract/'+scope.row.cght">{{ scope.row.cght }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="assetAllocate" label="调拨机构" width="200" :formatter="formatterMechanism"/>
          <el-table-column prop="assetAllocate" label="使用人" width="130" :formatter="formatterStaff"/>
          <el-table-column prop="assetDepreciation" label="折旧方法" width="200" :formatter="assetDepZjff"/>
          <el-table-column prop="assetDepreciation" label="折旧年限" width="130" :formatter="assetDepZjnx"/>
          <el-table-column prop="assetDepreciation" label="净值" width="200" :formatter="assetDepJz"/>
          <el-table-column prop="assetDepreciation" label="残值率" width="130" :formatter="assetDepCzl"/>
          <el-table-column prop="assetDepreciation" label="残值" width="200" :formatter="assetDepCz"/>
          <el-table-column prop="assetDepreciation" label="折旧金额" width="130" :formatter="assetDepZjje"/>
        </el-table>
        <el-pagination
                v-model:current-page="queryForm.pageNum"
                v-model:page-size="queryForm.pageSize"
                :page-sizes="[10,20,20,40,50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
      </el-card>
      <el-card class="card top">
        <template #header>
          <div class="card-header">
            <label style="font-weight: 600;font-size: 15px">
              <el-icon>
                <SoldOut/>
              </el-icon>
              附属信息
            </label>
          </div>
        </template>
        <Details :id="assetId"/>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from "vue";
import request, { getServerUrl } from "@/util/request";
import moment from "moment";
import Details from "./components/details.vue";
import Tree from "./components/tree.vue";
import { Edit, Search, Setting, SoldOut } from "@element-plus/icons-vue";

/**
 * 表格数据
 */
const tableData = ref([]);

/**
 * 数据总数
 */
const total = ref(0);

/**
 * 查询条件
 */
const queryForm = ref({
  map: {
    zcmc: "",
    zcbh: "",
    type_Id: "",
  },
  pageNum: 1,
  pageSize: 10
})

/**
 * 资产设备台账数据
 */
const initAssetCheckList = async () => {
  const res = await request.post("assetCheck/list", queryForm.value);
  console.log(res.data.assetList);
  tableData.value = res.data.assetList;
  total.value = res.data.total;
}
initAssetCheckList();

const assetTypeData = ref([])

const initAssetTypeList = async () => {
  const res = await request.get("assetType/list");
  assetTypeData.value = res.data.assetTypeList;
}
initAssetTypeList();
/**
 * 清空选项
 */
const reset = () => {
  queryForm.value.map.zcmc = "";
  queryForm.value.map.zcmc = "";
  queryForm.value.map.type_Id = "";
  initAssetCheckList();
}

/**
 * 处理每页记录数变化
 * @param pageSize
 */
const handleSizeChange = (pageSize) => {
  queryForm.value.pageNum = 1;
  queryForm.value.pageSize = pageSize;
  initAssetCheckList();
}

/**
 * 处理第几页变化
 * @param pageNum
 */
const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum;
  initAssetCheckList();
}

/**
 * 表格通用格式化时间信息
 * @param row
 * @param column
 * @returns {string}
 */
const formatDate = (row, column) => {
  let date = row[column.property];
  if (date === undefined) {
    return "";
  }
  return moment(date).format("YYYY/MM/DD");
}

/**
 * 格式化资产类别assetType数组信息
 * @param row
 * @returns {string}
 */
const formatterAssetType = (row) => {
  let assetTypeName = []
  for (let i = 0; i < row.assetType.length; i++) {
    assetTypeName.push(row.assetType[i].name)
  }
  return assetTypeName.join()
}

const formatterMechanism = (row, column, cellValue, index) => {
  return cellValue == null ? <el-tag type="warning" effect="dark">未调拨</el-tag> : cellValue.mechanism.name;
}

const formatterStaff = (row, column, cellValue, index) => {
  return cellValue == null ? "--" : cellValue.staff2.name;
}

const assetDepZjff = (row, column, cellValue, index) => {
  return cellValue == null ? <el-tag type="danger" effect="dark">未折旧</el-tag> : cellValue.zjff;
}

const assetDepZjnx = (row, column, cellValue, index) => {
  return cellValue == null ? "--" : cellValue.zjnx;
}

const assetDepJz = (row, column, cellValue, index) => {
  return cellValue == null ? "--" : cellValue.jingzhi;
}

const assetDepCzl = (row, column, cellValue, index) => {
  return cellValue == null ? "--" : cellValue.canzhilv;
}

const assetDepCz = (row, column, cellValue, index) => {
  return cellValue == null ? "--" : cellValue.canzhi;
}

const assetDepZjje = (row, column, cellValue, index) => {
  return cellValue == null ? "--" : cellValue.zjje;
}

const assetId = ref(-1)
const handleRowClick = (row) => {
  assetId.value = row.id;
}

const getAssetCheckByMid = async (id) => {
  if (id !== 0) {
    const res = await request.post("assetCheck/listByMec/" + id);
    console.log(res)
    tableData.value = res.data.assetList;
    total.value = res.data.assetList.length;
  }
}
</script>

<style lang="scss" scoped>
.card {
  border: none;
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.bs {
  margin: 0 2px 0 2px;
}

:deep(.el-table__body-wrapper) {
  .el-table__expanded-cell {
    z-index: 100;
    padding: 0;
  }
}

:deep(.el-table__fixed,.el-table__fixed-right) {
  .el-table__expanded-cell {
    visibility: hidden;
    padding: 0;
  }
}

:deep(.expand) {
  width: calc(100vw - 100px);
  padding: 20px;
  background: #fff; //盖住fixed产生的阴影
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

::v-deep th.el-table__cell {
  word-break: break-word;
  background-color: #f8f8f9 !important;
  color: #515a6e;
  height: 40px;
  font-size: 15px;
}

.top {
  margin-top: 10px;
}

.bottom {
  margin-bottom: 15px;
}

.t_box {
  display: flex;
  justify-content: space-between;

  .s_box {
    display: flex;
    width: 60%;

    .s_item {
      flex: 1;
      margin-right: 15px;
    }
  }
}
</style>